<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<script type="text/javascript"  src="js/jquery-3.6.0.js"></script>
<script>
    let access_token = null;
    // 授权回调
    window.responseFromCX = function (result){
        alert(JSON.stringify(result));
        var code = result.cx_platform_result ;
        var enterprise_id = getQueryVariable("cx_platform_enterprise_id");
        $.ajax({type:"POST",url:"/oauth/authorization",contentType:"application/json"
            ,async:false,data:JSON.stringify({"code":code,"enterprise_id":enterprise_id}),beforeSend:function(){},complete:function(){}
            ,success:function (data, textStatus, jqXHR){
                if(textStatus === "success"){
                    $("span.baseInfo").html(create_base_info_html(data))
                    var accessToken = data.access_token;
                    access_token = accessToken;
                    $.ajax({type:"POST",url:"/oauth/userList",contentType:"application/json"
                        ,async:false,data:JSON.stringify({"access_token":access_token,}),beforeSend:function(){},complete:function(){}
                        ,success:function (data, textStatus, jqXHR){
                            if(textStatus === "success"){
                                $("span.userList").html(create_user_list_html(data));
                            }
                        }
                        ,error:function(data){alert(JSON.stringify(data))}
                    });
                }
            }
            ,error:function(data){alert(JSON.stringify(data))}
        });
    }

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    function  getOAuth(){

        var enterprise_id = getQueryVariable("cx_platform_enterprise_id");

        var params = {
            "cx_platform_action" : "cx_platform_action_auth",
            "cx_platform_app_key" : "APPF8BF6C576D2C16B116EE5AD5",
            "cx_platform_enterprise_id" : enterprise_id
        }

        window.WebPage.requestToCX(JSON.stringify(params))
    }

    function create_base_info_html(data){
        var html = "<table><tr><td>用户ID</td><td>" + data.user_id
            + "</td></tr><tr><td>用户名</td><td>" + data.name
            + "</td></tr><tr><td>性别</td><td>" + data.sex
            +"</td></tr><tr><td>电子邮箱</td><td>" + data.email
            + "</td></tr><tr><td>电话</td><td>" + data.mobile
            + "</td></tr><tr><td>公司ID</td><td>" + data.enterprise_id
            + "</td></tr><tr><td>公司名称</td><td>" + data.enterprise_name
            + "</td></tr></table>"
        return html;
    }

    function create_user_list_html(data){
        try{
            var html = "<table>"
                + "<tr><td>id</td><td>name</td><td>sex</td><td>user_id</td><td>group_enterprise_id</td><td>enterprise_id</td>"
                + "<td>name_first_letter</td><td>name_first_pinyin</td><td>name_full_pinyin</td><td>mobile_number</td><td>发送短信息</td></tr>";
            var staffs = data;
            for (var staff_size = 0 ; staff_size < staffs.length; staff_size ++){
                html += "<tr><td>" + staffs[staff_size].id + "</td><td>" + staffs[staff_size].name
                    + "</td><td>"+ staffs[staff_size].sex + "</td><td>" + staffs[staff_size].user_id
                    + "</td><td>" + staffs[staff_size].group_enterprise_id + "</td><td>" + staffs[staff_size].enterprise_id
                    + "</td><td>" + staffs[staff_size].name_first_letter + "</td><td>" + staffs[staff_size].name_first_pinyin
                    + "</td><td>" + staffs[staff_size].name_full_pinyin + "</td><td>" + staffs[staff_size].mobile_number
                    + "</td><td><button onclick = sendMessage('"+  staffs[staff_size].user_id +"')>发送短信息</button></td>></tr>";
            }
            html += "</table>";
            return html;
        }catch (e) {
            console.error(e);
        }

    }

    function sendMessage(staff_num){

        $.ajax({type:"POST",url:"/oauth/sendMessage",contentType:"application/json"
            ,async:false,data:JSON.stringify({"access_token":access_token,"number":staff_num}),beforeSend:function(){},complete:function(){}
            ,success:function (data, textStatus, jqXHR){
                if(textStatus === "success"){
                    console.log(create_user_list_html(data));
                }
            }
            ,error:function(data){alert(JSON.stringify(data))}
        });

        console.log(staff_num);
    }

</script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hi , welcome !.
<button type="button" onclick="getOAuth()" name="oauth" value="oauth">oauth</button>
</p>
</br>
<span class = "baseInfo">baseInfo</span>
</p>
</br>
<span class = "userList">userList</span>
</body>
</html>